<template>
  <div :class="[bestMachine===current.name?'best':'','status-card']">
    <div class="status-head">
      <span> {{ current.name }} </span>
      <div class="status">
        <span :class="current.status !== 0?'':'green'" />
        <span :class="current.status !== 0?'red':''" />
      </div>
      <em v-if="current.status !== 0">开机</em>
      <em v-if="current.status === 0">关机</em>
    </div>
    <div class="status-body">
      <div class="weektime">
        <div class="hour">{{ current.weekTime }}</div>
        <div class="hour-text">本周运行时间</div>
        <div class="img1 move1" />
        <div class="img2 move2" />
      </div>
      <div class="totaltime">
        <div class="hour">{{ current.totalTime }}</div>
        <div class="hour-text">总运行时间</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: Object,
      default: () => {}
    },
    bestMachine: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
  .status-card{
    width: 90%;
    height: 100%;
    background: url('~@assets/report/currentbg.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 0.5rem;
    display: flex;
    flex-flow: column;
  }
   .status-card.best{
     background: url('~@assets/report/currentbestbg.png') no-repeat;
   }
  .status-head{
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    border-bottom: 1px solid rgba(185,185,185,0.4);
    padding: 0 1rem;
  }
  .status-head span{
    font-size: 1.2rem;
    font-weight: 600;
    color: #ccc;
  }
  .status-head em{
    font-size: 1.5rem;
    font-weight: 600;
    font-style: normal;
    color: #fff;
    float: right;
  }
  .status{
    float: right;
    width: 5rem;
    height: 3rem;
    border: 1.5px solid #fff;
    border-radius: 2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 1rem;
  }
  .status span{
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.6rem;
    background: #bbb;
  }
  .status span.red{
    background: red;
  }
  .status span.green{
    background: #25df2e
  }
  .status-body{
    width: 100%;
    flex-basis: 66%;
    position: relative;
  }
  .weektime,.totaltime{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content:center;

  }
  .totaltime{
    width: 8rem;
    height: 8rem;
    position: absolute;
    top: 22%;
    left: 60%;
  }
  .weektime{
    width: 11rem;
    height: 11rem;
    margin: 1rem;
    position: absolute;
    top: 47%;
    left: 22%;
    transform: translate(-50%, -50%);
  }
  .img1 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('~@assets/report/bigcircle.png') no-repeat center center;
  background-size: 100% 100%;
}

.img2 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('~@assets/report/smallcircle.png') no-repeat center center;
  background-size: 88% 88%;
}

.move1 {
	animation: myMove1 5s ease-in infinite alternate;
	-webkit-animation: myMove1 5s ease-in infinite alternate;
}
.move2 {
	animation: myMove2 3s ease infinite alternate;
	-webkit-animation: myMove1 3s ease infinite alternate;
}

@keyframes myMove1 {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

@-webkit-keyframes myMove1 {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
@keyframes myMove2 {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

@-webkit-keyframes myMove2 {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
  .hour{
    font-size: 1.8rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
  }
  .hour-text{
    font-size: 1rem;
    color: #ccc;
    text-align: center;
  }
</style>
